<template>
  <div class="login-wrap">
    <p class="title">智能拌合站登录系统</p>
    <div class="main">
      <p class="tip">欢迎登录</p>
      <el-form class="cont" :model="param" ref="login" label-width="0px">
        <div class="zhanghao">
          <el-form-item prop="username">
            <el-input class="example" id="user" v-model="param.username" placeholder="  请输入用户名">
              <img
                slot="prefix"
                src="../assets/img/title/用户名.png"
                alt
                srcset
                style="padding-right: 15px;margin-top: 15px;border-right: 1px solid #08a3af;"
              />
            </el-input>
          </el-form-item>
        </div>
        <div class="zhanghao1">
          <el-form-item prop="password">
            <el-input
              class="example"
              id="user1"
              type="password"
              placeholder="  请输入密码"
              v-model="param.password"
              @keyup.enter.native="submitForm()"
            >
              <img
                slot="prefix"
                src="../assets/img/title/密码.png"
                alt
                srcset
                style="padding-right: 15px;margin-top: 15px;border-right: 1px solid #08a3af;"
              />
              <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
            </el-input>
          </el-form-item>
        </div>
        <div @click="submitForm()" class="denglu">
          <p>立即登录</p>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      //先清除之前的缓存
      localStorage.clear();
      //表单验证  通过发送请求 否则不发送请求
      this.$refs["login"].validate((valid) => {
        if (valid) {
          this.$api
            .login(this.param)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: res.data.message,
                  duration: 2000,
                });
                localStorage.setItem("username", res.data.data.username);
                localStorage.setItem("conpany", res.data.data.conpany);
                localStorage.setItem("token", res.data.token);
                localStorage.setItem("user_id", res.data.data.id);
                this.$router.push({
                  path: "/sjzl",
                });
              } else {
                this.$message({
                  type: "success",
                  message: res.data.message,
                  duration: 2000,
                });
              }
            })
            .catch((error) => {
              console.log("错误:", error);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 36px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #00f6ff;
  text-align: center;
  padding-top: 200px;
}

.main >>> .el-input__inner {
  padding-left: 55px;
  width: 420px;
  height: 60px;
  background: #050814;
  opacity: 0.8;
  border-radius: 10px;
  border: none;
  color: #ffffff;
}

.login-wrap {
  width: 100%;
  height: 100%;
  background: url("../assets/img/title/beijiii.png") no-repeat;
}

.main {
  padding-top: 1px;
  margin: 0 auto;
  width: 552px;
  height: 564px;
  background: url("../assets/img/title/bgga.webp") no-repeat;
}

.biao {
  display: flex;
  justify-content: center;
  width: 772px;
  height: 40px;
  opacity: 1;
  font-size: 40px;
  font-family: Adobe Heiti Std, Adobe Heiti Std-R;
  text-align: left;
  color: #28e1f0;
  letter-spacing: 3px;
  margin-top: 30px;
}

.tip {
  margin-top: 109px;
  margin-bottom: 10px;
  margin-left: 66px;
  width: 98px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  line-height: 36px;
  background: linear-gradient(
    0deg,
    #adfaff 0%,
    #00f0ff 43.84765625%,
    #1b7cff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.zhanghao {
  height: 58px;
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 24px;
}

.zhanghao1 {
  margin-bottom: 100px;
  height: 58px;
  display: flex;
  justify-content: center;
  position: relative;
}

.cell {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 70px;
  top: 9px;
}

.cell1 {
  position: absolute;
  width: 35px;
  height: 38px;
  left: 70px;
  top: 9px;
}

.denglu {
  margin: 0 auto;
  width: 400px;
  height: 60px;
  background: linear-gradient(0deg, #015eea 0%, #00c0fa 100%);
  border-radius: 30px;
  text-align: center;
}

.denglu p {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 60px;
  text-align: center;
}
</style>
